<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- //引入axios包 -->
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- 移入进度条包 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
</head>

<body>
  <button id="btn">发送axios请求</button>
  <button id="btn1">取消axios请求</button>
</body>
<script>

  let btn = document.querySelector(`#btn`)
  let btnCancel = document.querySelector(`#btn1`)

  // const myaxios = axios.create({
  //   baseURL: '/',
  //   timeout: 1000,
  //   headers: {}
  // });

  //创建axios对象
  const myaxios = axios.create({
    baseURL: '/',
    timeout: 10000,
    headers: {}
  });

  // // 添加请求拦截器
  // myaxios.interceptors.request.use(function (config) {
  //   // 在发送请求之前做些什么

  //   //设置进度条
  //   NProgress.start()

  //   //打印配置对象
  //   // console.log(config);

  //   //声明token 校验身份
  //   const token = "asdasdas.dasdasd"

  //   console.log("token");

  //   //设置token 添加凭证
  //   config.headers.token = token

  //   //调试token
  //   // console.log(config.headers.token,'token');

  //   // 返回配置对象
  //   return config;

  // }, function (error) {
  //   // 对请求错误做些什么
  //   return Promise.reject(error);
  // });


  // // 添加响应拦截器
  // myaxios.interceptors.response.use(function (response) {
  //   // 对响应数据做点什么

  //   //设置进度条
  //   NProgress.done()

  //   //尝试给响应添加属性
  //   response.res = "响应"

  //   console.log(response.res);
  //   return response;
  // }, function (error) {
  //   // 对响应错误做点什么
  //   return Promise.reject(error);
  // });




  const CancelToken = axios.CancelToken;
  let cancel;

  btn.onclick = async function () {

    NProgress.start()


    // const iptValue = oIpt.value;
    try {
      const result = await myaxios.get("/cancel", {

        
        params: {
          userId: "001",
        },
        //在配置对象中配置一个cancelToken的配置项,值是实例化的CancelToken对象
        cancelToken: new CancelToken((c) => {
          //当请求发送的时候,这个回调函数会被执行,并接受一个参数,这个参数其实就是取消当前请求的函数
          // console.log(c);
          cancel = c;
          //一旦请求被中断,则会交给catch处理这个异常
        })
      })
      console.log(result);
    } catch (e) {
      console.log(e.message, "出现错误");
    }



  }










  btnCancel.onclick = function () {

    //虚假进度条
    NProgress.done()

    // 取消请求
    cancel();

  }
</script>

</html>